<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<script>
  // promise干什么的？
  // promise之前，异步是怎么解决的 ==> 回调函数
  // 解决回调地狱问题的


  // eventLoop
  // 1、为什么要有事件循环？
  //    浏览器单线程的，遇到比较耗时的任务，需要放到异步队列，如果不放到异步队列，阻塞其他的代码
  // 2、关键点：宏任务/微任务
  //   执行顺序是怎么样的？
  //   宏任务 ==> 微任务   微任务 ==> 宏任务

  // 如果说把当前的script当做一个宏任务
  // 先执行当前script宏任务，
  // 2、把当前宏任务产生的微任务清空之后，再走下一轮的宏任务

  // Vue

  const p = new Promise((resolve, reject) => {
    setTimeout(() => {
      reject(1)
    }, 1000)
  })

  // promise ==> 链式调用
  // 每次调用返回一个promise
  // 下一次的then的调用，取决于上一次then执行函数的返回结果
  // promise已经处理过的错误，不会继续向下流转
  // 如果then的第一个成功的回调参数没有传，内部会进行处理，正确的值继续向下流转
  // 如果then的第二个失败的回调参数没有传，内部会进行处理，错误继续向下抛



  p.then(res => {
    console.log('success') // err => throw err
    return 1
  }, err => {
    console.log(err)
  }).catch(err => {
    console.log('error')
    console.log(err)
  })


  // function catch(fn) {
  //   p.then(null, fn)
  // }
  // p.then(res => {
  //   console.log('success')
  //   // console.log(res)
  //   // return 1
  //   return 1
  // }, err => {
  //   console.log('error')
  //   return undefined
  // }).then(res => {
  //   console.log('res3')
  //   console.log(res)
  // }, err => {
  //   console.log('err4')
  // })


  // p.then(res => {
  //   console.log('success')
  //   console.log(res)
  // }, err => {
  //   console.log('error')
  //   return undefined
  // }).then(res => {
  //   console.log('res3')
  //   console.log(res)
  // }, err => {
  //   console.log('err3')
  // })

  //  error1
  //  error
  //  error ==> error1

//   静态方法
//  all、race
//   all干啥的？接受一个promise数组

  // 什么时候走成功，什么时候走失败
  // 成功
  // 全部成功的时候走成功
  // 有一个err的时候走失败

  // 如果走了成功拿到的res是什么？
  // 返回的成功结果的数组
  // 会
  // pending、fullfilled、rejected
  // 技术栈是什么、项目类型是什么、业务是什么、人员配比
  // vue里面处理数组和对象的响应式的时候有什么区别？
  Promise.all([p1, p2, p3]).then(res => {}, err => {});
  Promise.race([p1, p2, p3]).then(res => {}, err => {});

</script>
</body>
</html>
